#canvas {
  border: 1px solid #eee;
}

.upload {
  width: 400px;
}

#img {
  width: 400px;
  height: 300px;
}

.preview {
  margin-top: 10px;
}

.operation {
  width: 400px;
  height: 400px;
}

.video {
  width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.res {
  width: 100%;
  height: 80%;
  background-color: #eee;
  overflow-y: scroll;
}

p {
  margin: 10px 0;
}

.loading {
  display: none;
}

.content {
  position: fixed;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  opacity: 0.7;
}
#circle {
  animation: loading-circle 1.4s ease-in-out infinite;
  /* 圆内填充 */
  fill: none;
  /* 圆周颜色 */
  stroke: #28f0d7;
  /* 圆周宽度 */
  stroke-width: 3;
}

@keyframes loading-circle {
  0% {
    stroke-dasharray: 1px 200px;
    stroke-dashoffset: 0;
  }
  30% {
    stroke-dasharray: 100px 200px;
    stroke-dashoffset: -15px;
    stroke: #28f0d7;
  }
  100% {
    stroke-dasharray: 100px 200px;
    stroke-dashoffset: -120px;
  }
}

.circle-loading-svg {
  animation: loading-rotate 1.4s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0);
}

@keyframes loading-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1turn);
  }
}

.header {
  text-align: center;
  margin-bottom: 10px;
}

h1, .footer{
  margin: 0 auto;
  color: transparent;
  background: -webkit-linear-gradient(
    30deg,
    #32c5ff 25%,
    #b620e0 50%,
    #f7b500 75%,
    #20e050 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: auto;
  animation: gradientText 30s infinite linear;
  -webkit-animation: gradientText 30s infinite linear;
}

@keyframes gradientText {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 28000px;
  }
}

.footer {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.footer > :first-child {
  margin-right: 20px;
}
